<template>
    <div class="container">
        <Category title="美食">
            <!-- 准备具名插槽使用方式 -->
            <template v-slot:footer="slotProps">
                <ul>
                    <li v-for="(g, index) in slotProps.games" :key="index">
                        {{ g }}
                    </li>
                </ul>
            </template>
            <!-- 多个插槽就写多个template -->
            <template v-slot:a="slotProps">
                <ul>
                    <li v-for="(g, index) in slotProps.films" :key="index">
                        {{ g }}
                    </li>
                </ul>
            </template>
        </Category>
        <!-- 独占默认插槽的缩写语法 -->
        <Category title="游戏" v-slot:default="slotProps">
            <ul>
                <li v-for="(g, index) in slotProps.foods" :key="index">
                    {{ g }}
                </li>
            </ul>
        </Category>
        <!-- 解构插槽 Prop -->
        <Category title="电影">
            <!-- 标准 -->
            <!-- <template v-slot:b="{user}">
                <div>
                    {{user.fristName}}
                </div>
            </template> -->
            <!-- 改变名称 -->
            <!-- <template v-slot:b="{user:lll}">
                <div>
                    {{lll.fristName}}
                </div>
            </template> -->
            <!-- 用于插槽 prop 是 undefined 的情形： -->
            <template
                v-slot:b="{
                    user = { fristName: 'ssssssssssss', 'lastName': '222222' },
                }"
            >
                <div>
                    {{ user.lastName }}
                </div>
            </template>
        </Category>
    </div>
</template>

<script>
import Category from "@/components/Category";
export default {
    name: "App",
    components: {
        Category,
    },
    data() {
        return {};
    },
};
</script>
<style lang="css" scoped>
.container {
    display: flex;
    justify-content: space-around;
}
video {
    width: 100%;
}
img {
    width: 100%;
}
</style>



